$(function () {
    let movies;
    let types;
    let operas;
    $.ajax({
        url: 'https://www.fastmock.site/mock/bb4157f45a0b5ffdcb3f6d984517a6c0/woniuMovie/getAllTypes',
        success(data) {
            types = data.types;
        }
    });
    $.ajax({
        url: 'https://www.fastmock.site/mock/bb4157f45a0b5ffdcb3f6d984517a6c0/woniuMovie/getAllOperas',
        success(data) {
            operas = data.operas;
        }
    });
    $.ajax({
        url: 'https://www.fastmock.site/mock/bb4157f45a0b5ffdcb3f6d984517a6c0/woniuMovie/getAllMovies',
        success(data) {
            movies = data.movies;
            render();
        }
    });
    // 渲染页面
    function render() {
        let info = location.search.substr(1).split("id=")
        // 其他电影列表
        movies.forEach(movie => {
            $("#rotation ul").append($(
                `<li><img src="${movie.imgSrc}" alt=""></li>`
            ));
        });
        // 观看电影名称
        let movie = movies.find(movie => movie.id == info[1]);
        let opera = operas.find(opera => opera.id == info[2]);
        let newType = "";
        let month = getTime("MM");
        let date = getTime("DD");
        $("#movietitle").html(`${movie.title}<span>${movie.score} <i> 分</i></span>`);
        movie.movieType.forEach(ID => {
            let type = types.filter(type => ID == type.id);
            newType += `${type[0].name} `
        });
        $("#cinemashow").append($(
            `<div class="title-img">
                <img src="../images/cinema_pic1.jpg" alt="">
            </div>
            <div class="cinema-des">
                <h3>${opera.name}</h3>
                <p>${opera.address}</p>
                <p>电话：${opera.phone}</p>
                <p>影院服务<i></i></p>
                <h6><i>改签</i>未取票用户放映前3小时可改签</h6>
                <h6><i>3D眼镜</i>免押金</h6>
                <h6><i>儿童优惠</i>一名成人仅可携带一名不足1.3米儿童无座免费观影（巨幕厅、情侣厅除外），...</h6>
                <h6><i>WiFi</i>影院有免费WiFi</h6>
                <h6><i>可停车</i>商场内可停车。（检票口可领取2小时免费停车券）</h6>
            </div>`
        ));
        $("#cinemapath").text(`蜗牛电影 > 影院 > ${opera.name}`);
        $("#moviedes").append($(
            `<span>时长：<em>${movie.duration}</em></span>
            <span>类型：<em>${newType}</em></span>
            <span>主演：<em>${movie.actors.replaceAll('/', ' ')}</em></span>`
        ));

        // 语言调整 
        $("tbody tr td:nth-child(2)").text(movie.language);

        // 时间添加 页面增加了id today
        $("#today").text(`今天 ${month}月${date}`);
        $("#today").parent().next().text(`周六 ${month}月14`);
    }

    $("table tbody").on('click', 'tr', function () {
        location.assign(`chooseseat.html${location.search}`);
    });

    // 点击切换图片
    $(".prev").click(function () {
        let left = parseInt($("#rotation ul").css("left").replace('px', ''));
        if (left > -2000) {
            $("#rotation ul").css("left", `${left -= 180}px`);
        }
    });

    $(".next").click(function () {
        let left = parseInt($("#rotation ul").css("left").replace('px', ''));
        if (left < 0) {
            $("#rotation ul").css("left", `${left += 180}px`);
        }
    });

    $("tbody").on('click', 'tr', function () {
        let month = getTime("MM");
        let date = getTime("DD");
        let dateTime = getTime("YYYY-MM-DD")
        let order = {
            movieLanguage: $(this).find("td:nth-child(2)").text(),
            movieClass: $(this).find("td:nth-child(3)").text(),
            month: month,
            date: date,
            dateTime: dateTime,
            time: $(this).find("td:nth-child(1) p").text()
        };
        localStorage.setItem("order", JSON.stringify(order));
    })

    // 获取时间
    function getTime(format) {
        var now = new Date();
        //将YYYY转为当前的年份
        format = format.replace(/YYYY/g, now.getFullYear());
        //将MM转为当前的月份，本身api获取的0~11，所以要加1
        format = format.replace(/MM/g, now.getMonth() + 1);
        // 将DD转为当前日期
        format = format.replace(/DD/g, now.getDate());
        // 将hh转为当前小时数
        format = format.replace(/hh/g, now.getHours());
        //将mm转为当前分钟数
        format = format.replace(/mm/g, now.getMinutes());
        //将ss转为当前秒数
        format = format.replace(/ss/g, now.getSeconds());

        return format;
    };
});